<template>
  <div id="UserCenterMenu" class="mian">
    <div class="header">
      <div class="left">
        <img
          v-if="store.getters.user.userInfo.head"
          :src="'https://mcdn.chatgk.com' + store.getters.user.userInfo.head"
          alt=""
        />
        <img v-else src="../../assets/images/default-avatar.png" alt="" />
      </div>
      <div class="mid">
        <div class="name font-weight700" style="text-align: left">
          {{ store.getters.user.userInfo.nick }}
        </div>
        <div class="year f12 text-color" style="margin-top: 5px">
          高考年份{{ store.getters.user.userInfo.graduate_time }}年
        </div>
      </div>
      <div
        style="color: var(--active-text); margin-left: 20px; width: 25px"
        class="f12 curr"
        @click="handleEditUser"
      >
        编辑
      </div>
    </div>
    <div class="isVip df" v-if="store.getters.user.userInfo.isVIP != 0">
      <img
        style="width: 20px; margin: 0 5px"
        src="../../assets/images/vip.png"
        alt=""
      />
      <div class="f12">
        {{ store.getters.user.userInfo.cardTypeName }}
        <span style="margin: 0 5px">|</span> 有效期至{{
          store.getters.user.userInfo.expiretime
        }}
      </div>
    </div>

    <div
      class="isVip df hand-cursor"
      style="justify-content: space-around"
      v-else
    >
      <div>
        <span @click="onClickOpenVIP">升级VIP</span>
        <span style="margin: 0 5px">|</span>
        <span @click="hanleBindingVIP">绑定VIP</span>
      </div>
    </div>
    <!-- tab -->
    <div class="likeList">
      <div @click="followSchool">
        <span>关注院校</span>
        <span style="font-weight: 600">{{ schoolDetail }}</span>
      </div>
      <div @click="Profession">
        <span>关注专业</span>
        <span style="font-weight: 600">{{ majorDetail }}</span>
      </div>
      <div style="border: none" @click="articleDetails">
        <span>文章</span>
        <span style="font-weight: 600">{{ newsDetail }}</span>
      </div>
    </div>
    <div class="mt10">
      <div
        :class="{ isActive: isActive == item.url }"
        v-for="(item, index) in userMenuCenter"
        :key="item.id"
        class="items curr f14"
        @click="goToSubject(item, index)"
      >
        <span style="margin-right: 10px" :class="item.icon"></span
        >{{ item.title }}
      </div>
    </div>

    <!-- 退出 -->
    <div class="login-out curpoin">
      <span class="iconfont icon-tuichu" style="margin-right: 10px"></span>
      <span @click="handleLoginOut" style="font-size: 14px">退出</span>
    </div>
    <!-- 三角形 -->
    <div class="triangle-up"></div>
  </div>
  <!-- 绑定vip -->
  <bindingVIP ref="bindingVipRef" />
</template>

<script setup>
import bindingVIP from '@/components/BindingVip';
import { removeToken } from '@/utils/auth';
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { likeList } from '@/api/user';

const bindingVipRef = ref('');
const router = useRouter();
const route = useRoute();
const isActive = ref(route.path);
const store = useStore();
const schoolDetail = ref(0);
const majorDetail = ref(0);
const newsDetail = ref(0);
const like = ref({
  type: '',
  detail: '1',
});
const userMenuCenter = ref([
  {
    id: 1,
    title: '应用广场',
    url: '/applicationSquare',
    icon: 'iconfont icon-yingyongguangchang',
  },
  {
    id: 2,
    title: '志愿表',
    url: '/volunteerList',
    icon: 'iconfont icon-wodezhiyuanbiao',
  },
  {
    id: 3,
    title: '选科方案',
    url: '/mysubject',
    icon: 'iconfont icon-xuankefangan',
  },
  { id: 4, title: '测评报告', url: '/ping', icon: 'iconfont icon-ziyuan14' },
  // { id: 5, title: "关注/收藏", url: "/" },
]);
onMounted(() => {
  getLikeList();
});
const getLikeList = () => {
  likeList(like.value).then((res) => {
    if (res.data.code == 20000) {
      schoolDetail.value = res.data.data.schoolDetail?.length;
      majorDetail.value = res.data.data.majorDetail?.length;
      newsDetail.value = res.data.data.newsDetail?.length;
    } else {
      console.log(res);
    }
  });
};
const handleLoginOut = () => {
  removeToken();
  location.reload();
  router.push('/home');
};
const goToSubject = (item) => {
  isActive.value = item.url;
  router.push(item.url);
};
const hanleBindingVIP = () => {
  bindingVipRef.value.handleOpenVisible();
};
const onClickOpenVIP = () => {
  router.push({
    path: '/shopserve',
  });
};
const handleEditUser = () => {
  router.push({
    path: '/accounts',
  });
};
//关注学校
const followSchool = () => {
  router.push({
    path: '/followSchool',
  });
};
//关注专业
const Profession = () => {
  router.push({
    path: '/followProfession',
  });
};
//文章详情
const articleDetails = () => {
  router.push({
    path: '/article',
  });
};
</script>

<style lang="scss" scoped>
#UserCenterMenu {
  // width: 25%;
  width: 400px !important;
  height: 510px;
  //   padding: 15px;
  margin-right: 20px;
  border-radius: 10px;
  border: 1px solid #f2f2f2;

  // left: -135px;
  background: #fff;

  .header {
    padding: 15px;
    display: flex;
    // align-items: center;
    .left {
      border-radius: 50%;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-top: 10px;
      }
    }

    .mid {
      margin: 13px 35px 0 20px;
    }
  }

  .isVip {
    background: #fdecd2;
    height: 35px;
    padding: 0 0 0 15px;
    line-height: 35px;
    margin: 0 15px;
    border-radius: 4px;
  }

  .tab-box {
    height: 40px;
    text-align: center;
    border-top: 1px solid #f2f2f2;
    border-bottom: 1px solid #f2f2f2;
    line-height: 40px;

    .tab-left {
      width: 50%;
      height: 100%;

      border-right: 1px solid #f2f2f2;
    }

    .tab-left {
      width: 50%;
      height: 100%;
    }
  }

  .login-out {
    padding: 13px;
    // margin: 10px;
    border-top: 1px solid #f2f2f2;
    // border-bottom: 1px solid #f2f2f2;
    &:hover {
      color: var(--color-text);
    }
  }
  .likeList {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-items: center;
      width: 33.3%;
      justify-content: center;
      border-right: 1px solid #ccc;
      span {
        font-size: 16px;
        cursor: pointer; /* 鼠标悬浮时显示为手形 */
        transition: color 0.3s ease; /* 添加过渡效果 */
      }
    }
    div:hover {
      color: #409eff; /* 鼠标悬浮时字体变蓝 */
    }
  }
  .triangle-up {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 8px solid #fff;
    position: absolute;
    top: -16px;
    left: 50%;
  }

  .items {
    // background: red;
    margin: 10px 0;
    padding: 13px;

    &:hover {
      // background: var(--active-text);
      color: var(--color-text);
    }
  }

  .isActive {
    background: var(--background-color);
    color: #fff !important;
  }
}
.year {
  text-wrap: nowrap;
}
.hand-cursor {
  cursor: pointer;
}
</style>
